<template>
  <div>
    <el-card :class="['cardInTab']" shadow="never" key="card4">

      <el-collapse v-model="collapseActiveNames">
        <el-form ref="modifySkuRef">
          <el-collapse-item name="1">
            <template slot="title">
              <div :class="['collapseTitle']">
                <h1>基本信息</h1>
              </div>
            </template>
            <el-row :class="['contentArea']">
              <el-col :span="12">
                <el-form-item label="SKU编码:">
                  <el-input v-model="prodCurrentModifyingSku.code" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称:">
                  <el-input type="textarea" v-model="prodCurrentModifyingSku.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="价格(¥):">
                  <el-input v-model="prodCurrentModifyingSku.price"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库存量(件):">
                  <el-input v-model="prodCurrentModifyingSku.count"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div :class="['collapseTitle']">
                <h1>属性参数</h1>
              </div>
            </template>
            <el-row :class="['contentArea']">
              <el-col :span="16">
                <el-form-item :label="attr.attrName" v-for="attr in prodCurrentModifyingSku.attrs" :key="attr.id">
                  <el-input v-model="attr.attrOptionValue"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item  name="3">
            <template slot="title">
              <div :class="['collapseTitle']">
                <h1>规格参数</h1>
              </div>
            </template>
            <el-row :class="['contentArea']">
              <el-col :span="16">
                <el-form-item :label="spec.specName" v-for="spec in prodCurrentModifyingSku.specs" :key="spec.id">
                  <el-input v-model="spec.specOptionValue"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-form>
      </el-collapse>
      <el-row>


      </el-row>
      <el-row :class="['btnBar']">
        <el-button-group>
          <el-button type="info" @click="handleCancelModifySkuButtonClick">取消</el-button>
          <el-button type="primary" @click="handleConfirmModifySkuButtonClick">提交</el-button>
        </el-button-group>
      </el-row>

    </el-card>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import ImageListEdit from '../comp/ImageListEdit'
  import {prodTabNameList} from "../../config/variable";

  export default {
    name: "ProdSkuModify",
    components: {ImageListEdit},
    data(){
      return {
        prodTabNameList: prodTabNameList,
        collapseActiveNames:['1','2','3']
      }
    },


    computed: {
      ...mapState({
        ossServer:state=>state.prod.ossServer,
        imageServer: state=>state.prod.imageServer,
        prodActiveTabName:state=>state.prod.prodActiveTabName,
        prodCurrentModifyingSku: state=>state.prod.prodCurrentModifyingSku
      })
    },


    methods: {
      ...mapMutations(['setProdActiveTabName','setProdCurrentModifyingSku']),

      // 确认提交修改SKU
      async handleConfirmModifySkuButtonClick(){
        const result = await this.$confirm("确定要提交修改?","提示").catch(error=>null);
        if(result==='confirm'){
          this.api.__api__ProductSkuDetailsUpdate(this.prodCurrentModifyingSku)
            .then(data=>{
              this.setProdActiveTabName(prodTabNameList.prodDetails);
            }).catch(error=>null)
        }
      },

      //取消修改
      handleCancelModifySkuButtonClick(){
        this.setProdActiveTabName(prodTabNameList.prodDetails);
      }
    }
  }
</script>

<style scoped>
.collapseTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 22px;
  border-radius: 3px;
}

  .contentArea{
    background-color: #eeeeee;
    padding-left:10px;
    border:1px solid #ececec;
    margin:0px;
  }
</style>
